<template>
  <div style="min-height:75vh">
    <!-- <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam"></navTop> -->
    <section class="section_status changeBgToRed">
      <div class="section_top">
        <p>{{item.DURGSTORENAME}}</p>
        <p>
          ￥{{item.PRESCRIPTION_PRICE}}
        </p>
        <p>待付款</p>
      </div>
    </section>
    <section class="section_con"> <!-- style="background:#f1f1f1;font-size:0.9rem" -->
      <div class="section_con2">
        <p>订单号：{{item.PRESCRIBEID}}</p>
        <!--
        <p>药房：{{$route.query.yaofangname}}</p>
        <p>药房电话：{{$route.query.yaofangphone}}</p>
        <p>药房地址：{{$route.query.yaofangadr}}</p>
        -->
        <mt-switch v-model="kdfw">自提</mt-switch>
      </div>
      <!-- v-if="addrnum!==0" -->

      <div class="section_con3" v-show="!kdfw">

        <div v-if="addrnum>0" class="select2" style="position:relative;padding:0" @click="goAddr">
          <p>
            <span>收货人：</span>
            <span>{{selectedADDRALIAS_NAME}}</span>
          </p>
          <p>
            <span>联系电话：</span>
            <span>{{selectedADDRALIAS_MOBILE}}</span>
          </p>
          <p>
            <span>收货地址：</span>
            <span style="">{{selectedADDRALIAS_ADDR}}</span>
          </p>
          <p>
            <span></span>
            <span>
              <svg class="icon" style="" viewBox="0 0 1024 1024" width="20"
                fill="#ccc"
                height="20"
              ><defs><style type="text/css"></style></defs><path d="M128 512m-128 0a2 2 0 1 0 256 0 2 2 0 1 0-256 0Z"></path><path d="M512 512m-128 0a2 2 0 1 0 256 0 2 2 0 1 0-256 0Z"></path><path d="M896 512m-128 0a2 2 0 1 0 256 0 2 2 0 1 0-256 0Z"></path></svg>
            </span>
          </p>
          <!-- <span style="position: absolute;top: 20%;right: 1%;"><i class="iconfont icon-gengduo" style="font-size:2rem"></i></span> -->
        </div>
        <div v-else>
          <div class="select" style="text-align:center">
            <nuxt-link :to="{name:'wode-addAddress'}">新增收货地址</nuxt-link>
          </div>
        </div>
      </div>


      <!-- 2019-02-22 修改 处方信息 -->
      <div class="section_con9">
        <com-preinfo :preinfostr="item"></com-preinfo>
      </div>


      <div class="section_con4">
        <p>就诊留言：&nbsp;
          <textarea row="2" cols="30" style="resize:none" placeholder="(最多输入60字)"
            maxlength="60" v-model="wonote"
          ></textarea>
        </p>
      </div>
    </section>


    <section class="section_bot">
      <!--       <p>
        <span>医生：{{this.$route.query.doctorname}}</span>
        <span>金额：{{totalmoney}}元</span>
      </p> -->
      <nuxt-link class="pay" v-if="ifshowaddrcom"
       :to="{path:'/chufang/pay',query:{prescribeInfo: JSON.stringify(item), selectedADDRALIAS:this.selectedADDRALIAS}}" tag="div">付款</nuxt-link>
      <div class="pay1" v-else @click="addshaddr">请先添加收货地址</div>
    </section>

    <!-- 查看处方详情，查看后可以继续开处方-->
    <mt-popup
      v-model="showPrescribeDetails"
      position="top"
    >
      <!-- <h5>处方详情开发中...</h5> -->
      <!-- <prescribeDetails @closePreDetails="closePreDetails" :prescribeInfo="prescribeInfo"></prescribeDetails> -->
      <!-- <prescribeDetailsStatic @closePreDetails="closePreDetails"></prescribeDetailsStatic> -->
      <span>处方详情请咨询医师</span>
    </mt-popup>

  </div>
</template>
<script>
import navTop from '~/components/common/navTop';
import comPreinfo from '~/pages/chufang/components/com_preinfo';

export default {
  data() {
    return {
      YBZF: 0, // 医保支付的价格
      ACSM: '', // 医嘱，处方使用说明
      DOCTORDEPARTMENT: '', // 医生科室
      addrnum: 0, // 收药地址的数量
      showPrescribeDetails: false,
      prescribeType: '西药',
      prescribeDetailsInfo: '查看处方详情', // 处方详情

      hospitalName: '',
      kdfw: this.$route.query.kdfw == 'n', // y快递  n自提
      showBack: true,
      bkParam: 'bk',
      jgf: '', // 是否加工标记
      psf: '', // 是否配送标记
      wonote: '', // 患者留言
      medicfs: Number(this.$route.query.fs),
      medicjgf: 0, // 代加工金额
      medicpsf: 0, // 配送金额
      headTitle: '处方订单详情',
      prescribeInfo: '',
      durgList: [],
      prescribe: {},
      ts: this.newStore(),
      tq: this.getData(),
      DATA: { oid: this.$route.query.orderId },
      price: '0',
      selectAYID_DURGDETAILS: '', // 药方药品详情
      selectAYID_JE_SF: this.$route.query.yff, // 药方药品金额
      selectedAYID: this.$route.query.ayid,
      jeyf: this.$route.query.jeyf, // 实付款/金额
      addrList: [], // 收货地址列表
      selectedADDRALIAS: '', // 地址ID
      selectedADDRALIAS_NAME: '',
      selectedADDRALIAS_ADDR: '',

      selectedADDRALIAS_MOBILE: '',
      pricelist: [],
      selectAYID_JE_ZSF: 0, // 支付总金额

      preinfostr: '',
      item: {},

      ifshowaddr: false, // 是否显示地址信息
    };
  },
  components: {
    navTop, comPreinfo,
  },
  created() {
    document.title = '处方待付款';

    this.item = JSON.parse(this.$route.query.preinfostr);

this.getAddr();
  },
  mounted() {
  
  
  },
  computed: {
    totalmoney() {
      // return Number(this.selectAYID_JE_SF) + this.medicjgf + this.medicpsf;
      return Number(this.jeyf);
    },
    ifshowaddrcom() {
      if (this.kdfw) {
        return true;
      }
      if (this.ifshowaddr) {
        return true;
      }
      return false;
    },
  },
  methods: {
    showPrescribe() {
      this.showPrescribeDetails = true;
    },
    //
    getOrder(v_htoid) {

      const req = JSON.stringify({
        OTRequest: {
          VERSION: '1.0',
          TN: 'F27.APP.07.04',
          CLIENTID: 'YLAPP',
          RYBID: 'DOCTOR',
          TOKEN: `${sessionStorage.getItem('rybToken')}`,
          DATA: {
          htoid: v_htoid,
          }
        },
      });

this.spost(this.ts, '/doctor/AppMainServlet.ap', {
        '': req,
      }).then((ts) => {
      //this.prescribe= ts.d.DATAOBJ.DATA[0];
  
this.prescribeInfo= ts.d.DATAOBJ.DATA[0];
      this.wait=true;

      });
    },
    addshaddr() {
      this.$router.push('/wode/addAddress');
    },
    goAddr() {
      this.$router.push('/wode/addressList');
    },
    changejgfmoney() {
      this.jgf = !this.jgf;
      if (this.jgf) {
        this.medicjgf = 16 * this.medicfs;
      } else {
        this.medicjgf = 0;
      }
    },
    changepsfmoney() {
      this.psf = !this.psf;
      if (this.psf) {
        this.medicpsf = 8;
      } else {
        this.medicpsf = 0;
      }
    },
    changedz(id) {
      for (let i = 0; i < this.addrList.length; i += 1) {
        if (this.addrList[i].UAID == id) {
          this.selectedADDRALIAS_NAME = this.addrList[i].LXRXM;
          this.selectedADDRALIAS_ADDR = this.addrList[i].PRIVINCEMC + this.addrList[i].STREETMC + this.addrList[i].ADDR;
          this.selectedADDRALIAS_MOBILE = this.addrList[i].LXRSJ;
        }
      }
    },
    // 返回该患者收药地址列表
    getAddr() {
      this.tq.getAddr(this.DATA,this).then((ts) => {
        this.addrList = ts.d.DATAOBJ.DATA;
        this.addrnum = this.addrList.length;
        for (let i = 0; i < this.addrList.length; i += 1) {
          if (this.addrList[i].DEFAULTBZ == 'y') {
            this.changedz(this.addrList[i].UAID);
            this.selectedADDRALIAS = this.addrList[i].UAID;
          } else {
            this.changedz(this.addrList[0].UAID);
            this.selectedADDRALIAS = this.addrList[0].UAID;
          }
        }
        if (this.selectedADDRALIAS) {
          this.ifshowaddr = true;
        }
      });
    },
    // getAddr() {
    //   const req = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.02.27',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: { oid: this.$route.query.orderId },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': req,
    //   }).then((ts) => {
    //     // alert(`地址列表：  ${JSON.stringify(ts.d)}`);
    //     this.addrList = ts.d.DATAOBJ.DATA;
    //     this.addrnum = this.addrList.length;
    //     for (let i = 0; i < this.addrList.length; i += 1) {
    //       if (this.addrList[i].DEFAULTBZ == 'y') {
    //         this.changedz(this.addrList[i].UAID);
    //         this.selectedADDRALIAS = this.addrList[i].UAID;
    //       } else {
    //         this.changedz(this.addrList[0].UAID);
    //         this.selectedADDRALIAS = this.addrList[0].UAID;
    //       }
    //     }
    //   });
    // },


  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.mint-popup-top {
  top: 50%;
  font-size: 1rem;
  background: none;
  color: #fff;
  letter-spacing: 1px;
}
.section_con9 {
  border-radius: 10px;
  width: 95%;
  margin-left: 2.5%;
}
.section_con8 {
  border-radius: 10px;
  width: 95%;
  margin: 0 auto;
}
.section_con8 p {
  font-size: .8rem;
  display: flex;
  flex-flow: row | nowrap;
  justify-content: space-between;
  align-items: center;
  line-height: 1.5rem;
}
.section_con8 p:first-child{
  line-height:3rem;
  border-top: 0px solid #ccc;
}
.section_con8 p:first-child span:first-child{
  border: .5px solid #ff6200;
  line-height: 1rem;
  border-radius: 5px;
  letter-spacing: 2px;
  padding: .1rem;
  color: #ff6200;
  font-size: .5rem;
  text-align: center;
}
.section_con8 p:first-child span:last-child{
  width:70%;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align: right;
  color: #26a2ff;
}
.section_con8 p:nth-child(3) span:last-child{
  width:70%;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align: right;
}
.section_con8 p:nth-child(4) {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: .5px solid #eaeaea;
}
.section_con8 p:nth-child(5) span:last-child{
    font-size: .5rem;
    color: #ccc;
}
.section_con8 p:last-child span:last-child{
  color: #ff6200;
}
.mint-switch-core{
    display: inline-block;
    position: relative;
    width: 44px;
    height: 25px;
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #d9d9d9;
    margin-left: 1rem;
    margin-top: 0.5rem;
}
.chooseServer input{
  margin-left: 2rem;
}
.section_con3{
  border-radius: 10px;
  width: 95%;
  margin: 0 auto;
/*   -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
  -moz-box-shadow:0px 3px 3px #c8c8c8 ;
  box-shadow:0px 3px 3px #c8c8c8 ;
 */
}
.select2 {
}
.select2 p{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  line-height: 1rem;
  padding-top: 0.5rem;
}
.select2 p:nth-child(3) span:last-child{
  width:70%;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align: right;
}
.section_status {
  margin-top: 0rem;
  height: auto
}
.select select {
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 5px #ddd;
  padding: 0.4rem;
  width: 70%;
  overflow: auto;
  margin: 0;
}
.select option {
  background: #fff;
  border: none;
}
.section_top p {
  text-align: center;
  color: #333;
  font-size: 2rem;
  font-family: "微软雅黑";
  margin: 0;
  padding-top: 1rem;
}
.section_top p:first-child {
  font-size: 1rem;
  font-family: "微软雅黑";
}
.section_top p:nth-child(2) {
  color: #000;
}
.section_top p:last-child {
  font-size: 1rem;
  font-family: "微软雅黑";
  padding-top: .5rem;
  color: #ccc; /* 26a2ff */
}
.section_con1 {
  background: #e7e1a8;
  width: 100%;
}
.section_con {
  /* background:#f1f1f1; */
  font-size:1rem
}
.section_con p {
  /* padding-left: 0.5rem; */
  /* margin-bottom: 0.4rem; */
  color: #333;
  font-family: "微软雅黑";
}
.section_con div {
  margin-top: 0.5rem;
  background: #fff;
  padding: 0.5rem;
}
.section_con div:first-child {
  margin-top: 0;
}
.section_con1 span:last-child {
  float: right;
  padding-right: 1rem;
}
.section_con2 {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: #666;
}
.section_con2 p{
  color: #666;
}
/* .section_con2 span {
  float: right;
  padding-right: 1rem;
  font-size: 0.8rem;
} */
.section_con4 {
  width: 95%;
  margin: 0 auto;
  border-radius: 10px;
  color: #ccc;
}
.section_con4 p{
  color: #666;
  font-size: .8rem;
}
.section_con4 input {
  border: none;
  outline: none;
  width: 75%;
  padding: 0.3rem 0;
  font-size: .8rem;
}
.section_con5 ul {
  margin: 0;
  padding-left: 1rem;
  width: 100%;
  height: 5rem;
}
.section_con5 ul li {
  list-style: none;
  font-size: 0.9rem;
  margin-bottom: 0;
  color: #333;
  font-family: "微软雅黑";
  float: left;
  margin: 0.2rem 0.5rem;
}
.section_bot {
  /* background: #fff; */
  margin: 0.5rem 0;
  font-size: 0.9rem;
  /* position: fixed; */
  bottom: 0;
  width: 100%;
  margin-top: 1rem;
}
/* .section_bot p {
  padding-left: 0.5rem;
  margin-bottom: 0.4rem;
  color: #333;
  font-family: "微软雅黑";
  padding: 0.5rem 1rem;
} */
.section_bot span:nth-child(2) {
  float: right;
  color: #f60;
}
.section_bot .pay {
  width: 95%;
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: #26a2ff;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-weight: 100;
  letter-spacing: 2rem;
  margin: 0 auto;
  border-radius: 10px;
  padding-left: 2rem;
}
.section_bot .pay1 {
  width: 95%;
  padding: 8px;
  background-color:#ccc;
  border-color: #357ebd;
  color: #fff;
  border-radius: 0.2rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid transparent;
  /* font-weight: 700; */
  letter-spacing: .1rem;
  margin: 0 auto;
  border-radius: 10px;
}
.section_con7{
  min-height: 3rem;
  max-height: 5rem;
}
.changeBgToGreen {
  background-color: rgb(196, 123, 40);
}
.changeBgToBlue {
  background-color: rgb(224, 168, 62);
}
.changeBgToRed {
/*   background-color: rgb(236, 79, 79); */
  background-color: #fff;
}
.mint-switch-core::after{
  width: 22px;
  height: 22px;
}
.mint-switch-core {
  width: 44px;
  height: 25px;
}
.mint-switch-core::before {
  width: 42px;
  height: 23px;
}
</style>
